<template>
    <div class="dashboard">

       
      <div class="sidebar">
        <div class="user">
            <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="头像" class="img-circle">
            <div class="username">{{username}}</div>
        </div>
        <el-row class="tac" style="width: 100%;">
          <el-col :span="12" style="width: 100%;">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" @click="toIndex()">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <div v-if="authority == 1">
      <el-menu-item index="2" @click="toClass()">
        <i class="el-icon-s-custom"></i>
        <span slot="title">班级列表</span>
      </el-menu-item>
      <el-menu-item index="3" @click="toCourse()">
        <i class="el-icon-s-order"></i>
        <span slot="title">课程列表</span>
      </el-menu-item>
      <el-menu-item index="4" @click="toNewClass()">
        <i class="el-icon-circle-plus-outline"></i>
        <span slot="title">新建班级</span>
      </el-menu-item>
      <el-menu-item index="5" @click="toNewCourse()">
        <i class="el-icon-plus"></i>
        <span slot="title">新建课程</span>
      </el-menu-item>
      <el-menu-item index="6" @click="tologout()">
        <i class="el-icon-delete"></i>
        <span slot="title">用户注销</span>
      </el-menu-item>
      <el-submenu index="7">
        <template slot="title"><i class="el-icon-notebook-1"></i>用户注册</template>
        <el-menu-item-group>
          <el-menu-item index="7-1" @click="toRegister()"><i class="el-icon-edit-outline"></i>单个注册</el-menu-item>
          <el-menu-item index="7-2" @click="fileResgister()"><i class="el-icon-folder-add"></i>文件注册</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </div>
      <el-button type="danger" @click="exit()" class="delete-button">退出登录</el-button>
    </el-menu>
  </el-col>
</el-row>
      </div>

      
      <div class="main-content">
      <router-view>
    </router-view>
</div>
    </div>
  </template>
  
  <script>
import axios from 'axios';
  export default {
    name: 'Dashboard',
    data() {
    return {
      authority: localStorage.getItem('authority'),
      username: localStorage.getItem('chname'),
      tabPosition: 'left'
    }
  },
  mounted() {
    console.log(this.authority);
    this.$router.push('/PCIndex/PCIndexList');
  },
  methods: {
    exit() {  
      axios.get('/user/loginout')
      localStorage.clear();
      this.$router.push('/login');
    },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      toRegister() {
        this.$router.push('/PCIndex/Register');
    },
      toIndex() {
        this.$router.push('/PCIndex/PCIndexList');
    },
      toClass() {
        this.$router.push('/PCIndex/PCClassList');
    },
      toCourse() {
        this.$router.push('/PCIndex/PCCourseList');
    },
      toNewClass() {
        this.$router.push('/PCIndex/CreateClass');
    },
      toNewCourse() {
        this.$router.push('/PCIndex/CreateCourse');
    },
      tologout() {
        this.$router.push('/PCIndex/logout');
    },
    fileResgister() {  
      const input = document.createElement("input");
        input.type = "file";
        input.enctype = "multipart/form-data";
        input.click();
        input.addEventListener("change", function () {
          // 处理选择文件后的逻辑
          // 创建一个 FormData 对象
          const file = new FormData();
          file.append("file", input.files[0]); // 将文件添加到 file 中
          axios
            .post("/user/importStudentbyex", file, {
              Headers: {
                "Content-Type": "application/octet-stream",
              },
            })
            .then((response) => {
              console.log(response);
              // this.$message.success("注册成功！");
              alert("注册成功！");
            })
            .catch((error) => {
              alert("注册失败，请检查文件格式或是否有已注册用户。");
              console.log(error);
            });
        });
    },
  }
  };
  </script>
  
  <style scoped>
  .dashboard {
    display: flex;
    height: 100%;
    justify-content: center; /* 内容居中 */
  }
  
  .sidebar {
    /* height: 100%; */
    flex: 0 0 20%; /* 占总宽度的20% */
    max-width: 20%; /* 设置最大宽度 */
    margin-left: 10%; /* 左留白 */
    background-color: #566686;
  }
  
  .sidebar ul {
    list-style: none;
    padding: 0;
  }
  
  .sidebar li {
    padding: 10px 0;
  }
  
  .sidebar a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 10px;
  }
  
  .main-content {
    flex: 1;
    padding: 20px;
  }

  .img-circle {
  width: 100px; /* 设置图片宽度 */
  height: 100px; /* 设置图片高度 */
  border-radius: 50%; /* 使图片呈现圆形 */
  object-fit: cover; /* 保持图片比例，并填充整个元素 */
}

.user-info {
  /* margin-top: 50px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

ul .li{
  width: 80%;
  margin: 10px auto;
  text-align: center;
  border: 1px solid #2a2727;
  transition: background-color 0.3s; /* 过渡效果，使颜色渐变变化 */

}

ul .li:hover {
  background-color: #dbf0c4; /* 鼠标悬停时的背景颜色 */
}

.user {

    padding-top: 50px;
    text-align: center;
    width: 100%;
    /* height: 200px; */
    background-color:#566686;
  /* display: flex; */
  align-items: center;
}

.username {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
}

.el-icon-setting{
  /* background-color: black; */
  color: white;
}

.el-menu-vertical-demo{
  background-color: #3a62be;
}

.el-menu-vertical-demo .span{
  margin: 0 auto;
}

.main-content {
  flex: 1 0 60%;
  margin-right: 10%;
  padding:0;
}

.delete-button {
  margin-top: 10px;
  width: 100%;
}
  </style>
  